<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas 绘制纵向蓝色虚线</title>
  </head>
  <body>
    <canvas
      id="myCanvas"
      width="200"
      height="400"
      style="border: 1px solid #000"
    ></canvas>
    <svg
      viewBox="0 0 320 512"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      class="chevron-right"
    >
      <path
        d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
      ></path>
    </svg>
    <script>
      // 获取canvas元素
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // 设置线条样式
      ctx.strokeStyle = "blue"; // 设置线条颜色为蓝色
      ctx.lineWidth = 2; // 设置线条宽度
      ctx.setLineDash([10, 10]); // 设置虚线：每段10像素的实线和10像素的空白

      // 绘制纵向虚线
      ctx.beginPath();
      ctx.moveTo(100, 0); // 起点位置 (x: 100, y: 0)
      ctx.lineTo(100, 400); // 终点位置 (x: 100, y: 400)
      ctx.stroke(); // 绘制线条
    </script>
  </body>
</html>
